<!DOCTYPE HTML>
<html class="x-admin-sm">
<head>
    <th:block th:insert="head/head :: common_head"></th:block>
    <link rel="stylesheet" th:href="@{/ztree/css/metroStyle/metroStyle.css}">
</head>
<body onload="init('jsmc')">
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card" style="margin: 10px;">
                    <div class="layui-tab layui-tab-brief">
                        <div class="layui-tab-content" >
                            <div class="layui-tab-item layui-show">
                                <form class="layui-form layui-form-pane" action="">
                                    <input type="hidden" id="per" name="per" autocomplete="off" class="layui-input">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">
                                            <span class='x-red'>*</span>角色名称：
                                        </label>
                                        <div class="layui-input-block">
                                            <input type="text" id="jsmc" name="jsmc" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">
                                            <span class='x-red'>*</span>菜单权限：
                                        </label>
                                        <div class="layui-input-block" style="border: 1px solid #bebebe">
                                            <ul id="list_ztree" class="ztree"></ul>
                                        </div>
                                    </div>
                                </form>
                                <button class="layui-btn" lay-submit="" lay-filter="*" id="bc">
                                    新增存盘
                                </button>
                                <button type="button" class="layui-btn layui-btn-primary" onclick="window.location.href='query'">返回上页</button>
                                <div style="height:100px;"></div>
                            </div>

                        </div>
                    </div>
                </div>
        </div>
    </div>
</div>
</div>
<th:block th:insert="head/head :: common_jsfiles"></th:block>
<script type="text/javascript" th:src="@{/ztree/js/jquery.ztree.core.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/ztree/js/jquery.ztree.excheck.js}" charset="utf-8"></script>
<script>
    /**
     * lx 0 表示新增  1 表示修改 id 为主键
     * 所有增改页面，载入时，都是通过doFirst回调renderForm
     *
     */
    var lx="[[${lx}]]";
    var id="[[${id}]]";
    var url = "[[${serverUrl}]]/sys/role/";
    var ms="role_info";
    $(document).ready(function() {
        if(lx=="1"){
            $("#bc").html("修改存盘");
        }else{
            $("#bc").html("新增存盘")
        }
    });

    //layui初始化
    layui.use(['form'], function(){
        var form = layui.form;

        //渲染表格参数，如果lx=1 为修改，需要回写表单
        var renderForm = function (formData){
            if (lx==1){
                $("#jsmc").val(formData.tRole.name);
                $("#per").val(formData.per);
            }
            form.render(); // 重新渲染

            //树渲染
            init_tree();
        }

        //页面载入时候，首选从后台获取数据，然后回调renderForm。
        function doFirst(){
            var jsonData = {
                id: id,
                lx: lx,
                timestamp:new Date().getTime()
            };
            var sendStr = {
                data:encrypt_str(JSON.stringify(jsonData),localStorage.getItem("a"),localStorage.getItem("b"))
            };
            post_json_form(url+"info",JSON.stringify(sendStr),"数据加载中...",renderForm);
        }

        //渲染表格参数
        var renderTree = function (formData){
            $.fn.zTree.init($("#list_ztree"), setting, formData.treejson);
            var zTree = $.fn.zTree.getZTreeObj("list_ztree");//获取ztree对象
            zTree.expandAll(true);
        }

        function init_tree(){
            var per = $("#per").val();
            //发送的请求
            var jsonData = {
                per:per,
                id: id,
                timestamp:new Date().getTime()
            };
            var sendStr = {
                data:encrypt_str(JSON.stringify(jsonData),localStorage.getItem("a"),localStorage.getItem("b"))
            };
            post_json_form(url+"tree",JSON.stringify(sendStr),"数据加载中...",renderTree);
        }

        //配置ztree
        var setting = {
            data: {
                simpleData: {
                    enable: true,            //simple模式开启
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: null
                }
            },
            view: {
                fontCss : {color:"#676767"}
            },
            check: {
                enable: true,
                chkStyle: "checkbox",
                chkboxType: { "Y": "ps", "N": "ps" }
            }
        };

        //提交操作
        function onSave(nonce_zhi){
            //获取提交令牌
            if (is_null(nonce_zhi)){
                $('#bc').removeClass("layui-btn-disabled").attr("disabled",false);
                layer.msg("没有获取到操作凭证！请重试！",{icon:2,anim:6});
                return false;
            }
            var jsonData = {
                per: $("#per").val(),
                jsmc: $("#jsmc").val(),
                lx: lx,
                id: id,
                nonce_ms:ms,
                nonce_zhi:nonce_zhi,
                timestamp:new Date().getTime()
            };
            var sendStr = {
                data:encrypt_str(JSON.stringify(jsonData),localStorage.getItem("a"),localStorage.getItem("b"))
            };
            post_json_token(url+"save",JSON.stringify(sendStr),"数据提交中...");
        }

        //监听提交
        form.on('submit(*)', function(data){
            if ($("#jsmc").val()==""){
                layer.msg("请输入角色名称！",{icon:2,anim:6});
                init('jsmc');
                return false;
            }
            var zTree = $.fn.zTree.getZTreeObj("list_ztree");			//获取ztree对象
            var a = zTree.getCheckedNodes(true);
            var v="";
            for(var i=0;i<a.length;i++)
            {
                v+=a[i].id + ",";
            }
            if (!is_null(v)) v = v.substring(0, v.length - 1);
            $("#per").val(v);

            if ($("#per").val()==""){
                layer.msg("请选择菜单权限！",{icon:2,anim:6});
                return false;
            }
            if (!confirm("是否确定操作？")) return false;
            //灰掉按钮，获取令牌进行提交。也可以选择页面载入时候，先获取令牌，再提交。但是因为令牌有时间限制，如果停留时间太长，会导致令牌失效。提交效果不好。
            $('#bc').addClass("layui-btn-disabled").attr("disabled",true);
            psot_get_nonce(ms,"[[${serverUrl}]]/getnonce",onSave)
            return false;
        });

        //首先执行
        doFirst();
    });
    //存盘后的回调
    function on_result(result)
    {
        $('#bc').removeClass("layui-btn-disabled").attr("disabled",false);
        if (result.code!=500)
        {
            if (result.code==1 || result.code==2){
                //新增成功
                layer.msg(result.msg, { time: 1000 }, function() {
                    window.location.href='query'
                });
            } else {
                layer.msg(result.msg);
            }
        }
        else
        {
            layer.msg(result.msg);
        }
    }
</script>
</body>
</html>